<template>
  <div id="body-box">
    <div class="box-card">
      <div class="message-container" ref="messageContainer">
        <div
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          :class="message.type"
        >
          <img src="../../assets/default.png" alt="Avatar" class="avatar" />
          <div class="message-content">{{ message.content }}</div>
        </div>
      </div>
      <div class="input-container">
        <input
          v-model="inputMessage"
          @keypress.enter="sendMessage"
          placeholder="输入消息..."
          ref="input"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="24"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          客户姓名：
          <el-input v-model="userName" placeholder="请输入内容" style="width: 200px;"></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          客户电话：
          <el-input v-model="userPhone" placeholder="请输入内容" style="width: 200px;"></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          客户所在地：
          <el-input v-model="userAddr" placeholder="请输入内容" style="width: 200px;"></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          业务类型：
          <el-radio-group v-model="userQueryType">
            <el-radio :label="3">投诉</el-radio>
            <el-radio :label="6">咨询</el-radio>
            <el-radio :label="9">办理</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          详情：
          <el-input type="textarea" :rows="5" :cols="6" placeholder="请输入内容" v-model="textarea"></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="24">
          <el-button type="primary" round @click="saveAll">保存</el-button>
        </el-col>
      </el-row>
    </el-card>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      userPhone: "",
      userAddr: "",
      userDetail: "",
      userQueryType: "",
      textarea: "",
      webSocket: null,
      messages: [],
      inputMessage: ""
    };
  },
  methods: {
    saveAll() {
      var params = {};
      params.userName = this.userName;
      params.userPhone = this.userPhone;
      params.userAddr = this.userAddr;
      params.textarea = this.textarea;
      params.userQueryType = this.userQueryType;
      params.messageDto = this.messages;
      console.log(this.messages);
      this.$axios.post("api/custom-server/custom/saveAll", params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }else{
          this.$message({
            type:'error',
            message:res.data.msg
          })
        }
      });
    },
    showError(msg) {
      alert(msg);
    },
    init(kfId, UserId) {
      if (typeof WebSocket === "undefined") {
        this.showError("您的浏览器不支持 WebSocket");
        return;
      }
      console.log("您的浏览器支持 WebSocket");
      const socketUrl = `ws://localhost:8502/websocket/${kfId}/${UserId}`;

      this.webSocket = new WebSocket(socketUrl);

      this.webSocket.onmessage = res => {
        const data = res.data;
        this.messages.push({
          type: "received",
          content: data,
          avatar: "../../assets/waiter.png"
        });
        this.scrollToBottom();
      };

      this.webSocket.onerror = error => {
        console.error("WebSocket 发生错误:", error);
        // this.showError("WebSocket 发生错误，请稍后再试。");
      };

      this.webSocket.onclose = () => {
        console.log("WebSocket 已关闭，尝试重新连接...");
        // 可以考虑重新连接逻辑
      };

      this.scrollToBottom();
    },
    sendMessage() {
      if (!this.webSocket || !this.inputMessage.trim()) {
        return;
      }
      this.webSocket.send(this.inputMessage);
      this.messages.push({
        type: "sent",
        content: this.inputMessage,
        avatar: this.getBasePath() + "/assets/waiter.png"
      });
      this.inputMessage = "";
      this.scrollToBottom();
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    getBasePath() {
      return window.location.origin; // 根据实际情况修改
    },
    scrollToBottom() {
      const container = this.$refs.messageContainer;
      if (container) {
        container.scrollTop = container.scrollHeight;
      }
    }
  },
  mounted() {
    this.init(1, 2);
  }
};
</script>

<style scoped>
#body-box {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  width: 70%;
  /* margin-right: 800px; */
  margin: 10px;
  min-height: 80vh; /* 添加最小高度 */
  max-height: 80vh;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.message-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  margin-bottom: 60px;
}

.message-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-item.sent {
  align-items: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.message-content {
  max-width: 70%;
  padding: 10px;
  border-radius: 5px;
  background: #ffffff;
}

.message-item.sent .message-content {
  background: #e1f5fe;
}

.input-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: #fff;
}

input {
  flex: 1;
  padding: 10px;
  border: 0px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin-right: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}
</style>